<template>
  <div class="lib-selected w100 bc2 border-none pd20p">
    <div class="ls-top h50p">
      <SelectorText
        :msg="{ text: '前端面试题库1' }"
        @lib-change="fnLibChange"
      />
      <div class="float-right h60p cc-display">
        <button class="bc1" @click="fnCreatePaper">
          <span class="fs16 fw200 white">建试卷</span>
        </button>
        <button class="bc1"><span class="fs16 fw200 white">筛选</span></button>
      </div>
      <div class="clean-float"></div>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import SelectorText from "../../Text/SelectorText/SelectorText.vue";

export default {
  // 子组件
  components: {
    SelectorText,
  },
  // 父组件传值
  props: {
    msg: String,
  },
  // 父组件事件
  emits: ["lib-changet"],
  // 钩子
  setup(props, { emit }) {
    // 路由
    const { push } = useRouter();
    // 双向绑定书
    const state = reactive({ lib: 1 });
    // 题库变更
    const fnLibChange = (val) => {
      state.lib = val;
      emit("lib-changet", val);
    };
    // 建试卷
    const fnCreatePaper = () => {
      push("/createpaper/" + state.lib);
    };
    // 输出到模板
    return {
      state,
      fnLibChange,
      fnCreatePaper,
    };
  },
};
</script>

<style scoped>
.lib-selected {
  border-radius: 4px;
}
</style>
